<template>
  <div class="work-calendar">
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="small" style="width: 120px" @change="changeDate">
        <el-option v-for="item in yearList" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
      <el-select v-model="currentMonth" size="small" style="width: 120px; margin-left: 10px" @change="changeDate">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
    </el-row>
    <el-calendar v-model="currentDate">
      <template #dateCell="{ date, data }">
        <div class="date-content">
          <!-- //!#1 getDay 是星期几 -->
          <!-- <span class="text"> {{ date.getDay() }} </span> -->
          <!-- //!#2 getDate 是日 -->
          <!-- <span class="text"> {{ date.getDate() }} </span> -->
          <!-- //!#3 局部过滤器 -->
          <span class="text"> {{ data.day | handleDay }} </span>
          <!-- //!#4 过滤器本质上就是方法，用方法也行 -->
          <!-- <span class="text"> {{ handleDay(data.day) }} </span> -->
          <span v-if="(date.getDay() === 0 || date.getDay() === 6)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
// Vue.filter
export default {
  filters: {
    handleDay(n) {
      // n => 2022-08-05
      const r = n.split('-')[2]
      return r.startsWith('0') ? r.slice(1) : r
    }
  },
  props: {
    startDate: {
      type: Date,
      // 给对象指定默认值，需要通过函数再 return 一个对象
      default: () => new Date()
    }
  },
  data() {
    return {
      currentMonth: null, // 当前月份
      currentYear: null, // 当前年份
      currentDate: null,
      yearList: []
    }
  },
  // !日历改变影响下拉框
  watch: {
    currentDate(newDate) {
      this.currentYear = newDate.getFullYear()
      this.currentMonth = newDate.getMonth() + 1
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleDay(n) {
      // n => 2022-08-05
      const r = n.split('-')[2]
      return r.startsWith('0') ? r.slice(1) : r
    },
    init() {
      // 年
      this.currentYear = this.startDate.getFullYear()
      // 月
      this.currentMonth = this.startDate.getMonth() + 1
      // 年份区间，当前年，[...,2013, 2014, 2015, 2016, 2017, ...]
      // fill 就是填充的意思，默认会给数组填充 undefined，这里的目的是为了能循环
      this.yearList = Array(11).fill().map((_, index) => this.currentYear + index - 5)
    },
    // !下拉框的改变影响日历
    changeDate(d) {
      // 把选择到的时间格式化成日期对象，赋值给 this.currentDate，日历就会变化了
      /* if (d > 12) {
        // 年
        this.currentYear = d
      } else {
        // 月
        this.currentMonth = d
      } */
      // new Date() 里面的参数月份不需要做加减，例如下面就是得到 2022 年 12 月 12 日的日期对象
      // new Date('2022-12-12')
      // 但是调用 getMonth() 得到的结果却是 0~11 之间的，需要减 1
      this.currentDate = new Date(`${this.currentYear}-${this.currentMonth}-1`)
    }
  }
}
</script>

<style scoped lang="scss">
.work-calendar {
  ::v-deep {
    .el-calendar-day {
      height: auto;
    }

    .el-calendar-table__row td,
    .el-calendar-table tr td:first-child,
    .el-calendar-table__row td.prev {
      border: none;
    }

    .el-calendar-table td.is-selected .text {
      background: #409eff;
      color: #fff;
      border-radius: 50%;
    }

    .el-calendar__header {
      display: none;
    }
  }
}

.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  white-space: nowrap;

  .rest {
    color: #fff;
    border-radius: 50%;
    background: rgb(250, 124, 77);
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
  }

  .text {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
  }
}
</style>
